<template>
    <div class="privateMessage app-container">
      <div class="privateMessage_con __page">
        <div class="classify_del_btn">
          <div>
            <el-radio-group v-model="classify" size="small" fill="#409EFF" @input="daysSelectOnly">
              <el-radio-button label="未读"></el-radio-button>
              <el-radio-button label="已读"></el-radio-button>
              <el-radio-button label="全部"></el-radio-button>
            </el-radio-group>
          </div>
          <div>
            <el-button size="small" type="primary">删除</el-button>
            <el-button size="small" type="primary">标记已读</el-button>
            <el-button size="small" type="primary">全部已读</el-button>
            <el-button size="small" type="primary">全部删除</el-button>
          </div>
        </div>
        <div class="table_box">
          <el-table
            :data="tableData"
            border
            stripe
            height="600"
            style="width: 100%">
            <el-table-column
              type="selection"
              width="55">
            </el-table-column>
            <el-table-column label="类型" align="center" width="200">
              <el-table-column align="center" width="200">
                <template slot="header">
                  <el-select v-model="typeState" placeholder="请选择" size="mini">
                    <template slot="prefix">
                      <span style="padding-left: 5px;">
                        <i class="el-icon-search"></i>
                      </span>
                    </template>
                    <el-option
                      v-for="item in typeStateoptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </template>
                <template slot-scope="scope">
                  <span>{{scope.row.position}}</span>
              </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="内容" align="center">
              <el-table-column align="center">
                <template slot="header">
                  <el-input
                    v-model="content"
                    size="mini"/>
                </template>
                <template slot-scope="scope">
                  <span>{{scope.row.dispose_unit}}</span>
              </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="时间" align="center" width="300">
              <el-table-column align="center" width="300">
                <template slot="header">
                  <el-date-picker
                    v-model="startEndTime"
                    type="datetimerange"
                    :picker-options="pickerOptions"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    align="right"
                    size="mini"
                    style="width: 100%;">
                  </el-date-picker>
                </template>
                <template slot-scope="scope">
                  <span>{{scope.row.dispose_unit}}</span>
              </template>
              </el-table-column>
            </el-table-column>
          </el-table>

          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-sizes="[7, 20, 30, 40]"
            :page-size="limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import {Ledgerlist} from '@/api/release'
  export default {
    name: 'privateMessage',
    data(){
      return{
        classify:'未读',
        page:1,
        limit:10,
        total:0,
        tableData:[],
        typeState:"", //类型
        typeStateoptions:[{ // 类型状态下拉
          value: '0',
          label: '开拍提醒'
        }, {
          value: '1',
          label: '通过提醒'
        }, {
          value: '2',
          label: '交易提醒'
        },{
          value: '3',
          label: '驳回提醒'
        },{
          value: '4',
          label: '处理通知'
        }],
        content:'', //内容
        startEndTime:"", //时间

        value2: '', 
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
      }
    },
    mounted(){
      this.list({page:this.page,limit:this.limit});
    },
    methods:{
      list(obj){
        Ledgerlist(obj).then(res=>{

        });
      },
      daysSelectOnly(label){

      },
      // 分页
      handleSizeChange(val) {
        this.limit = val
        this.list()
      },
      // 分页
      handleCurrentChange(val) {
        this.page = val
        this.list()
      },
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .privateMessage {
   .privateMessage_con{
      .classify_del_btn{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
      }
      
   }
  }
  </style>
  